<template>
    <div class="edit-task">
      <!-- 编辑任务卡片 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>编辑任务</span>
        </div>
        <!-- 表单 -->
        <el-form :model="taskForm" label-width="100px">
          <!-- 任务名称输入框 -->
          <el-form-item label="任务名称">
            <el-input v-model="taskForm.name"></el-input>
          </el-form-item>
          <!-- 完成状态开关 -->
          <el-form-item label="完成状态">
            <el-switch v-model="taskForm.completed"></el-switch>
          </el-form-item>
          <!-- 操作按钮 -->
          <el-form-item>
            <el-button type="primary" @click="saveTask">保存</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        taskForm: {
          id: null,
          name: '',
          completed: false
        }
      };
    },
    created() {
      this.initializeTask();
    },
    methods: {
      initializeTask() {
        const taskId = this.$route.query.taskId;
        console.log(taskId)
        if (taskId) {
          this.fetchTask(taskId);
        }
      },
      fetchTask(taskId) {
        const token = localStorage.getItem('token');
        axios.put(`/api/tasks/update`, {
          headers: {
            'Authorization': token
          }
        })
        .then(response => {
          this.taskForm = response.data;  // 假设响应数据直接是任务对象
        })
        .catch(error => {
          this.$message.error('加载任务信息失败');
        });
      },
      saveTask() {
        // 添加保存任务逻辑
      },
      cancel() {
        this.$router.go(-1); // 返回上一页
      }
    }
  };
  </script>
  
  <style scoped>
  .edit-task {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
  }
  
  .box-card {
    width: 400px;
  }
  </style>
  